<template>
  <van-cell class="company-info" title="" @click="$router.push(`/company/detail/${companys.id}`)">
    <template v-slot:label>
      <van-row class="top">
        <van-col class="cover-wrap">
          <van-image class="cover-item-img" :src="companys.companyLogo" fit="cover" />
        </van-col>
        <van-col class="info-wrap">
          <h4>{{ companys.companyName }}</h4>
          <p>{{ companys.introduce }}</p>
          <div class="tag">
            <van-tag v-for="(item, index) in companys.tag" :key="index" type="primary" plain round>{{ item }}</van-tag>
          </div>
        </van-col>
      </van-row>
      <van-row v-if="distance" class="bottom">
        <van-col class="position"><van-icon name="location" />{{ companys.distance }}km</van-col>
        <van-col class="msg van-ellipsis">{{ companys.address }}</van-col>
      </van-row>
      <van-row v-else>
        <van-col span="24" class="van-ellipsis">{{ companys.address }}</van-col>
      </van-row>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'CompanyInfo',
  components: {},
  props: {
    companys: { type: Object, required: true },
    distance: { type: Boolean, default: true }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.company-info {
  .top {
    display: flex;
    margin-bottom: 20px;
  }
  .cover-wrap {
    width: 160px;
    height: 160px;
    .cover-item-img {
      width: 100%;
      height: 100%;
    }
  }
  .info-wrap {
    flex: 1;
    h4, p {
      margin: 0;
    }
    h4 {
      font-size: 28px;
      color: #333;
    }
    p {
      margin: 26px 0;
    }
    .tag {
      .van-tag {
        margin-right: 20px;
        padding: 0 30px;
        height: 40px;
      }
    }
  }
  .cover-wrap, .position {
    margin-right: 20px;
  }
  .bottom {
    display: flex;
    .position {
      width: 160px;
      i.van-icon {
        margin-right: 10px;
        font-size: 26px;
        top: 3px;
      }
    }
    .msg {
      flex: 1;
      max-width: 520px;
    }
  }
}
</style>
